<template>
	<div class="chart-pane" :style="{height:clientHeight+'px'}">
		<Button large @click="goHome" type="primary">返回首页</Button>
		<div class="chart-title">合肥高新区</div>
		<div class="chart-h3">
			<div class="chart-h3-inner chart-h3-inner1">舆情监控</div>
		</div>
		<div class="chart-item">
			<div class="chart-item-inner chart-item-inner2">

				<div class="chartsubitem">
					<div class="chart-h5">舆情周报</div>
					<div class="chart-articlelist">
						<ul class="chart-item-news">
							<li v-for="item in dataHotNews">
								<a :href="item.link" target="_blank" :title="item.title">{{item.title}}</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="chartsubitem">
					<div class="chart-h5">媒体来源占比</div>
					<div class="chart-item-source">
						<customized-pie></customized-pie>
					</div>
				</div>

				<div class="chartsubitem">
					<div class="chart-h5">敏感词</div>
					<div class="chart-item-words">
						<word-cloud></word-cloud>
					</div>
				</div>
			</div>
		</div>

		<div class="chart-h3">
			<div class="chart-h3-inner chart-h3-inner1">媒体展示</div>
		</div>
		<div class="chart-item">
			<div class="chart-item-inner chart-item-inner2">
				<div class="chartsubitem">
					<div class="chart-h5">浏览量<span>单位：次</span></div>
					<div class="chart-item-medialine">						
						<media-line></media-line>
					</div>
				</div>
				<div class="chartsubitem">
					<div class="chart-h5">最新发布</div>

					<div class="chart-articlelist">						
						<ul class="chart-item-news">
							<li v-for="item in dataLastNews">
								<a :href="item.link" target="_blank" :title="item.title">{{item.title}}</a>
								<span class="articlebasic">{{item.subtitle}}  {{item.publishtime}}</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>



		<div class="chart-column">
			<div class="chart-column-cols">
				<div class="displayflex">
					<div class="chart-h3">
						<div class="chart-h3-inner chart-h3-inner4">政策跟踪</div>
					</div>
					<div class="chart-item">
						<div class="chart-item-inner">
							<div class="chartsubitem">
								<div class="chart-h5">科技部关于开展2018年度全国科技统计调查工作的通知</div>
								<div class="chart-item-files">						
									<smoothed-line></smoothed-line>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="chart-column-cols">
				<div class="displayflex">
					<div class="chart-h3">
						<div class="chart-h3-inner chart-h3-inner5">资源集合</div>
						<Button type='primary' large style="float: right" @click="resourcesModal =true">资源编辑</Button>
					</div>
					<div class="chart-item">
						<div class="chart-item-inner">
							<div class="chartsubitem" style="border-right: 1px solid #076e7d;">
								<div class="chart-h5">优势资源</div>
								<div class="chart-item-aboutus">
									<ul class="chart-item-resTit chart-item-resTit1">
										<li class="on" v-for="(item,index) in superiorResource" :key="index"  v-if="index<1">{{item.title}}</li>
										<li v-for="(item,index) in superiorResource" :key="index" v-if="index>=1">{{item.title}}</li>
									</ul>
									<ul class="chart-item-resCon chart-item-resCon1">
										<li style="display: block" v-for="(item,index) in superiorResource" :key="index" v-if="index<1">{{item.content}}</li>
										<li v-for="(item,index) in superiorResource" :key="index" v-if="index>=1">{{item.content}}</li>
									</ul>
								</div>
							</div>
							<div class="chartsubitem" style="border-left: 1px solid #076e7d;">
								<div class="chart-h5">稀缺资源</div>
								<div class="chart-item-aboutus">
									<ul class="chart-item-resTit chart-item-resTit2">
										<li class="on" v-for="(item,index) in scarceResources" :key="index" v-if="index<1">{{item.title}}</li>
										<li v-for="(item,index) in scarceResources" :key="index" v-if="index>=1">{{item.title}}</li>
									</ul>
									<ul class="chart-item-resCon chart-item-resCon2">
										<li style="display: block" v-for="(item,index) in scarceResources" :key="index" v-if="index<1">{{item.content}}</li>
										<li v-for="(item,index) in scarceResources" :key="index" v-if="index>=1">{{item.content}}</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="chart-column">
			<div class="chart-column-cols">
				<div class="displayflex">
					<div class="chart-h3">
						<div class="chart-h3-inner chart-h3-inner1">地域分析</div>
					</div>
					<div class="chart-item">
						<div class="chart-item-inner chart-item-inner2">
							<div class="chartsubitem">
								<div class="items-maps displayflex">
									<div class="chart-h5">安徽地图</div>
									<div class="chart-item-map flexdiv">
										<div class="itemcenter">
											<!-- <img src="../../assets/chart/anhui.png"> -->
											<anhui-map></anhui-map>
										</div>
									</div>
								</div>
							</div>
							<!--<div class="chartsubitem">-->
								<!--<div class="chart-h5">TOP 5<span>单位：次</span></div>-->
								<!--<div class="chart-item-bar">-->
									<!--<bar-simple></bar-simple>-->
								<!--</div>-->
							<!--</div>-->
						</div>
					</div>
				</div>
			</div>

			<div class="chart-column-cols">
				<div class="displayflex">
					<div class="chart-h3">
						<div class="chart-h3-inner chart-h3-inner5">项目申报</div>
					</div>
					<div class="chart-item">
						<div class="chart-item-inner chart-item-inner2">
							<div class="chartsubitem">
								<!--<div class="chart-h5">最新发布</div>-->

								<div class="chart-articlelist">
									<ul class="chart-item-news1">
										<li v-for="item in projectDeclaration">
											<a :href="item.link" target="_blank" :title="item.title">{{item.title}}</a>
											<!--<span class="articlebasic">{{item.subtitle}}  {{item.publishtime}}</span>-->
											<Button class="articlebasic"  type="primary" @click="connection =true">咨询</Button>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>



		<Modal v-model="resourcesModal" title="资源编辑">
		<Form :label-width="100">
			<FormItem>
				<RadioGroup>
					<Radio label="superior">优势资源</Radio>
					<Radio label="scarce">稀缺资源</Radio>
				</RadioGroup>
			</FormItem>
			<FormItem label="资源名称">
				<Input type="text" placeholder="请输入资源名称" />
			</FormItem>
			<FormItem label="资源简介">
				<Input type="text" placeholder="请输入资源名称" />
			</FormItem>
		</Form>
		</Modal>
		<Modal v-model="connection" title="联系">
			<Row>
				<Col>
					<h3>联系人:李腾飞</h3>
					<h3>联系电话:13522868331</h3>
				</Col>
			</Row>
		</Modal>
	</div>

</template>
<script>
import Barsimple from './Barsimple'
import Smoothedline from './Smoothedline'
import Medialine from './Medialine'
import CustomizedPie from './CustomizedPie'
import WordCloud from './WordCloud'
import AnhuiMap from './AnhuiMap'
export default{
	name:'chart',
	components:{
		'bar-simple':Barsimple,
		'smoothed-line':Smoothedline,
		'media-line':Medialine,
		'customized-pie':CustomizedPie,
		'word-cloud':WordCloud,
		'anhui-map':AnhuiMap
	},
	data(){
		return {
			msg:'大屏',
            resourcesModal:false,
            connection:false,
			clientHeight:document.body.clientHeight-30,






        dataLastNews:[

        {
					title:'边际效益递增 模型创新推动财富创造——合肥高新区高质量发展调研行三',
					link:'http://www.stdaily.com/zhuanti01/hfgxq/2019-05/08/content_764691.shtml',
					subtitle:'科技日报',
					publishtime:'05-08'
				},
				{
					title:'栽梧筑渊 这是养人的好地方——合肥高新区高质量发展调研行之二',
					link:'http://www.stdaily.com/zhuanti01/hfgxq/2019-05/06/content_764134.shtml',
					subtitle:'科技日报',
					publishtime:'05-06'
				},

        {
            title:'牢牢记总书记嘱托 下好创新先手棋——合肥高新区高质量发展调研行之一',
                link:'http://www.stdaily.com/zhuanti01/hfgxq/2019-04/29/content_763503.shtml',
            subtitle:'中国科技网',
            publishtime:'04-29'
        },
				{
					title:'【壮丽70年 奋斗新时代】合肥高新区管委会主任宋道军：依靠创新迈向世界一流科技园区',
					link:'http://www.stdaily.com/zhuanti01/hfgxq/201904/763341.shtml',
					subtitle:'中国科技网',
					publishtime:'04-28'
				},
				{
					title:'合肥高新区管委会主任宋道军：依靠创新迈向世界一流科技园区',
					link:'http://www.stdaily.com/zhuanti01/hfgxq/2019-04/28/content_763341.shtml',
					subtitle:'中国科技网',
					publishtime:'04-28'
				}
			],
			dataHotNews:[
                {
					title:'合肥高新区舆情周报5.24',
					link:'http://yun.kjcg123.com:8080/tcsamp/hefei5.24.pdf',
				},
				{
					title:'合肥高新区舆情周报5.31',
					link:'http://yun.kjcg123.com:8080/tcsamp/hefei5.31.pdf',

				},
				{
					title:'合肥高新区舆情周报6.10',
					link:'http://yun.kjcg123.com:8080/tcsamp/hefei6.10.pdf',
				},
				{
					title:'“中国区县专利与创新指数”发布的舆情专报',
					link:'http://yun.kjcg123.com:8080/tcsamp/zb.pdf',
				},
				{
					title:'两会期间“科研项目经费使用包干制试点”舆情专报',
					link:'http://yun.kjcg123.com:8080/tcsamp/yq.pdf',
				}
					],
            projectDeclaration:[
                {
                    title:'国家重点研发计划“主要经济作物优质高产与产业提质增效科技创新”等重点专项',
                    link:'https://www.most.gov.cn/mostinfo/xinxifenlei/fgzc/gfxwj/gfxwj2019/201905/t20190516_146591.htm',

                },
                {
                    title:'2019年度国家“科技冬奥”重点专项定向项目河北省申报启动',
                    link:'https://www.most.gov.cn/dfkj/hb/zxdt/201905/t20190530_146918.htm',



                },
                {
                    title:'2020年度贵州省基础研究计划（科学技术基金）申报指南发布',
                    link:'https://www.most.gov.cn/dfkj/gz/zxdt/201905/t20190521_146691.htm',

                },
                {
                    title:'“国家重点研发计划“战略性国际科技创新合作”重点专项2019年度牵头组织国际大科学计划和大科学工程培育项目申报指南',
                    link:'https://www.most.gov.cn/mostinfo/xinxifenlei/fgzc/gfxwj/gfxwj2019/201905/t20190505_146372.htm',

                },
                {
                    title:'国家重点研发计划“蓝色粮仓科技创新”等重点专项2019 年度项目申报指南',
                    link:'https://www.most.gov.cn/mostinfo/xinxifenlei/fgzc/gfxwj/gfxwj2019/201905/t20190524_146851.htm',

                }

			],


            aboutUs:"",
            superiorResource:[
				{
				    title:'产业资源',
					content:'培育了科大讯飞、科大国盾、四创电子、华米科技、阳光电源、科大国创、安科生物等领军企业，形成了人工智能、公共安全、新能源、生物医药、先进制造等高端产业集群。'
				},
                {
                    title:'科教资源',
                    content:'集聚了中科大高新园区和中科大先研院、中科院创新院等重大协同创新平台，建台，建成省级以上技术（工程）研究中心169家，战新产业领军人才127人。'
                },
                {
                    title:'人工智能',
                    content:'科大讯飞智能机器人“晓曼”成为全球首台全程语音交互的银行服务机器人；安徽克洛斯威智能乐器科技有限公司研制出全球首台软硬件一体化互联网智能钢琴，构建了“智能硬件+线下体验馆+音乐教育大数据”为一体的音乐教育生态，颠覆传统钢琴及传统钢琴教育模式。'
                },
				{
                    title:'量子通信',
                    content:'由中科大潘建伟团队主研的世界首台光量子计算机亮相，十个超导量子比特纠缠首次成功实现。世界首条长距离量子通信“京沪干线”及“量子科学试验卫星”合肥总控中心全面建成并投入使用，构建了中国天地一体化的广域量子通信网络雏形。中科院强磁场科学中心自主研制成功磁场强度世界第二稳态强磁场装置。'
                }
			],
            scarceResources:[
                {
                    title:'商业业态',
                    content:'新区商业业态(商铺)成交340套，上市450套；王咀湖板块商圈、砂之船（合肥）奥莱，加快建设商业配套设施。'
                },
                {
                    title:'5G',
                    content:'5G网络的主要目标是让终端用户始终处于联网状态。5G网络是指下一代无线网络。5G网络将是4G网络的真正升级版，它的基本要求并不同于无线网络。合肥高新技术产业园区将持续培育并带动5G企业发展。'
                },
                {
                    title:'新能源汽车',
                    content:'园区大力支持新能源汽车新能源汽车是指采用非常规的车用燃料作为动力来源（或使用常规的车用燃料、采用新型车载动力装置），综合车辆的动力控制和驱动方面的先进技术，形成的技术原理先进、具有新技术、新结构的汽车。'
                },
                {
                    title:'芯片制造',
                    content:'合肥高新技术开发区鼓励发展芯片制造产业发展，立足合肥，大力支持半导体设备，被动组件等小型化制造发展。'
                }
			]



        }
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.getaboutUs();
    	this.tabsClick();
    },
	methods:{
        goHome(){
            this.$router.push('/')
		},
		getaboutUs(){
			var that = this;
			that.aboutUs="<p>合肥国家级高新技术产业开发区是1991年经国务院批准的首批国家级高新区，区域面积128平方公里，是合肥省市城市西部副中心，毗邻市政府和新桥国际机场，独拥“一山两湖”，是合肥综合性国家科学中心的核心区、国家自主创新示范区和首批国家双创示范基地，是创新型国家建设的战略支点和合肥建设“大湖名城 创新高地”的主要载体。</p> <p>经过26年的奋力建设，培育了以科大讯飞、科大国盾、四创电子、华米科技、阳光电源、安科生物等为代表的具有自主知识产权、国内外领先的高科技企业，形成了智能语音、电子信息、智能制造、公共安全、新能源、生物医药等高端产业集群，建有集成电路（芯之城）、智能语音（中国声谷）、生物医药3个省级战略性新兴产业基地，区内企业2万家，高新技术企业603家，自主培育上市公司18家，在146个国家级高新区综合排名中位居第6位。</p>"
		},
        tabsClick(){
            $(".chart-item-resTit1 li").click(function () {
                let _index=$(this).index()
                $(this).addClass("on").siblings().removeClass("on")
                $(".chart-item-resCon1 li").eq(_index).show().siblings().hide()
            })
            $(".chart-item-resTit2 li").click(function () {
                let _index=$(this).index()
                $(this).addClass("on").siblings().removeClass("on")
                $(".chart-item-resCon2 li").eq(_index).show().siblings().hide()
            })
        }
	},
	filters: {
        filterFun: function(value) {
          if (value && value.length > 20) {
            value = value.substring(0, 20) + "...";
          }
    
          return value;
        },
     }

}
</script>
<style rel="stylesheet/less" lang="less" >
ul,li{
	list-style: none;
	padding:0;
	margin:0;
}
.displayflex(){
	-webkit-display: flex;
	-moz-display: flex;
	display: flex;
}
.flexdiv(){
	-webkit-flex:1;
	-moz-flex:1;
	flex:1;
}
.displayflex{
	-webkit-display: flex;
	-moz-display: flex;
	display: flex;
}
.flexdiv{
	-webkit-flex:1;
	-moz-flex:1;
	flex:1;
}
.alignitems(){
	width:100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.chart-pane {
	background-color: #0d0f2a;
	background-image: url(../../assets/chart/bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	box-sizing: border-box;
	padding: 16px;
	height: 1000px;
	overflow: auto;
	.chart-title {
		font-size: 30px;
		color: #FFFFFF;
		line-height: 40px;
		text-align: center;
		font-weight: bold;
	}
	.chart-item {
		margin-top: -1px;
		border: 1px solid #076e7d;
		padding: 20px;
		border-radius: 10px;
		.items-maps {
			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			flex-direction: column;
			height: 100%;
		}
	}
	.chartsubitem {
		background: rgba(47, 53, 137, .35);
		.flexdiv();
		border-radius: 10px;
	}
	.chart-item-inner {
		.displayflex();
		.chart-item-map {
			.itemcenter {
				.displayflex();
				text-align: center;
				.alignitems()
			}
			img {
				display: block;
			}
		}
	}
	.chart-item-inner2 {
		.chartsubitem {
			padding: 30px;
			margin-right: 20px;
			&:last-child {
				margin-right: 0px;
			}
		}
	}
	.chart-h3 {
		color: #ce301a;
		font-size: 28px;
		line-height: 50px;
		height: 50px;
		padding: 0 0 0 48px;
		margin-top: 20px;
		.chart-h3-inner {
			display: inline-block;
			position: relative;
			padding: 0 70px 0 105px;
			background-repeat: no-repeat;
			background-position: 70px center;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				transform: scaleY(1.45) perspective(100px) rotateX(30deg);
				transform-origin: bottom;
				border-radius: .5em .5em 0 0;
				border: 1px solid #076e7d;
				border-bottom: 1px solid #0d0f2a;
			}
		}
		.chart-h3-inner1 {
			background-image: url(../../assets/chart/icon-1.png);
		}
		.chart-h3-inner4 {
			background-image: url(../../assets/chart/icon-4.png);
		}
		.chart-h3-inner5 {
			background-image: url(../../assets/chart/icon-5.png);
		}
	}
	.chart-h5 {
		font-size: 18px;
		color: #00fcf9;
		position: relative;
		line-height: 1;
		padding-left: 30px;
		height: 25px;
		overflow: hidden;
		&:before {
			width: 20px;
			height: 20px;
			content: '';
			display: inline-block;
			background-color: #00fcf9;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}
		span {
			float: right;
			color: #ffffff;
		}
	}
	.chart-item-news {
		li {
			border-bottom: 1px solid #0f4564;
			font-size: 18px;
			background: url(../../assets/chart/icon6.png) no-repeat 0 center;
			height: 50px;
			line-height: 50px;
			padding-left: 30px;
			clear: both;
			overflow: hidden;
			.displayflex();
			a {
				color: #ffffff;
				display: inline-block;
				.flexdiv();
			}
			span.articlebasic {
				color: #9293a2;
				display: inline-block;
				text-align: right;
				width: 150px;
			}
		}

	}
	.chart-item-news1 {
		li {
			border-bottom: 1px solid #0f4564;
			font-size: 18px;
			background: url(../../assets/chart/icon6.png) no-repeat 0 10px;
			line-height: 40px;
			padding-left: 30px;
			clear: both;
			.displayflex();
			a {
				color: #ffffff;
				display: inline-block;
				.flexdiv();
			}
			.articlebasic {
				/*color: #9293a2;*/
				display: inline-block;
				/*text-align: right;*/
				height: 30px;
				margin-top: 5px;
			}
		}

	}
	.chart-item-aboutus {
		color: #ffffff;
		font-size: 18px;
		line-height: 175%;
		padding: 10px 0 0 0;
		div {
			margin: 12px 0 0 0;
			text-indent: 2em;
			text-align: justify;
		}
	}
	.chart-item-resTit {
		width: 120px;
		float: left;
		li {
			border: 1px solid #076e7d;
			background: #0d0f2a;
			color: #00fcf9;
			font-size: 18px;
			width: 100%;
			display: block;
			margin: 10px 0px;
			text-align: center;
		}
		.on{
			/*background:rgba(47, 53, 137, 0.35);*/
			color: #ce301a;
		}
	}
	.chart-item-resCon {
		box-sizing: border-box;
		float: left;
		width: 120px;
		margin-left: 15px;
		padding: 8px;
		border: 1px solid #076e7d;
		background: rgba(47, 53, 137, 0.35);
		color: #FFFFFF;
		font-size: 14px;
		height: 310px;
		overflow: hidden;
		li {
			display: none;
			width: 100%;
			line-height: 20px;
		}
	}

	.chart-column{
		.displayflex();
		.chart-column-cols{
			.flexdiv();
			.displayflex{
				-webkit-flex-direction: column;
				-moz-flex-direction: column;
				flex-direction: column;
				height: 100%;
				.chart-item{
					.flexdiv();
					.chart-item-inner{
						height:100%;
					}
				}
			}
			.chartsubitem{
				padding:30px;
			}			
			&:first-child{
				margin-right:20px;
			}
		}
	}
	.chart-articlelist{
		padding:15px 0 0 0;
	}

}
</style>